<template>
  <div>
     <div class="register_con">
		<div class="l_con fl">
			<a class="reg_logo"><img src="../assets/images/logo02.png"></a>
			<div class="reg_slogan">足不出户  ·  新鲜每一天</div>
			<div class="reg_banner"></div>
		</div>

		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="#">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form>
				<ul>
					<li>
						<label>用户名:</label>
						<input type="text" name="user_name" id="user_name" v-model="username" @blur="username_blur">
						<span class="error_tip">{{username_error}}</span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" id="pwd" v-model="password">
						<span class="error_tip"></span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" id="cpwd" v-model="re_password">
						<span class="error_tip"></span>
					</li>
                    <li>
						<label>手机号:</label>
						<input type="text" name="phone" id="phone" v-model="phone">
						<span class="error_tip"></span>
					</li>
                    <li>
						<label>地址:</label>
						<input type="text" name="address" id="address" v-model="address">
						<span class="error_tip"></span>
					</li>
					<li>
						<label>邮箱:</label>
						<input type="text" name="email" id="email" v-model="email">
						<span class="error_tip"></span>
					</li>
					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked" v-model="allow">
						<label>同意”天天生鲜用户使用协议“</label>
						<span class="error_tip2"></span>
					</li>
					<li class="reg_sub">
						<input type="button" value="注 册" name="" @click="register">
					</li>
				</ul>				
				</form>
			</div>

		</div>

	</div>
<MyCertification></MyCertification>
	
  </div>
</template>

<script>
import axios from 'axios'
import mycertification from './common/Certification'
export default {
	components:{
		'MyCertification':mycertification
	},
    data(){
        return{
          username:'',
           password:'',
           re_password:'',
            phone:'',
            address:'',
            email:'',
            allow:'',
            username_error:''
        }
    },methods:{
        username_blur(){
            axios.get('http://127.0.0.1:8000/user',{'params':{'username':this.username}}).then(resp=>{
                console.log(resp.data)
                if(resp.data.status==200){
                    this.username_error='√'
                }else{
                    this.username_error='该用户名已使用'
                }
            }).catch(error=>{
                console.log(error)
            })
        },
       
         
        register(){
                if (this.username==''|this.password==''|this.re_password==''|this.phone==''|this.address==''|this.email==''){
                alert("内容不能为空")
            }
            //验证两次密码
            if (this.password!=this.re_password){
                alert('两次密码不一致，请重新输入')
            }
            //同意协议
            if(!this.allow){
                alert('请点击我已知晓合同')
            }



            const fd={
                username:this.username,
                password:this.password,
                phone:this.phone,
                address:this.address,
                email:this.email
            }
           axios.post('http://127.0.0.1:8000/register',fd).then(resp=>{
               console.log(resp.data)
               if(resp.data.status==200){
                   alert("恭喜您!注册成功")
               }else{
                   alert("注册失败")
               }
           }).catch(error=>{
               console.log(error)
           })
        }
    }
}
</script>

<style>

</style>